/** * @description : 零售户信息列表 * @descriptionDetail : 零售户信息列表 * @copyright : 浙江烟草 * @author : dw * @create : 2022-11-05 10:10:13 */
<template>
  <view class="page">
    <!-- #ifdef H5-ONLY -->
    <theme-navbar
      :is-white="false" backText="返回" title="零售户列表"
      :custom-back="goBack"
    ></theme-navbar>
    <!-- #endif -->
    <view class="nolicence-search-lay" :style="{'top': isHideNav ? 0 : '44px'}">
      <u-search
        shape="round"
        :clearabled="true"
        :showAction="true"
        actionText="确定"
        :animation="true"
        placeholder="许可证、企业字号、持证人、地址、电话等"
        v-model="keyword"
        @custom="handlerSearch"
      ></u-search>
    </view>
    <view class="content-list">
      <me-table
        :i="0" :top="108" :index="0"
        :load-data="loadData" :init-load="false" ref="mescrollItem0"
      >
        <view class="re-list" slot-scope="d">
          <view class="re-content">
            <view class="re-manager" @click="viewRetailerDetail(d.data)">
              <text class="re-title">
                {{ d.data.companyName }}
              </text>
              <u-tag
                style="flex-shrink: 0; height: fit-content"
                :spStyle="getSpStyle(d.data)"
                v-if="d.data.licStatus"
                mode="dark"
                shape="circle"
                :text="d.data.licStatusName"
              ></u-tag>
              <text class="re-tit"></text>
            </view>
            <view class="re-subtitle">
              {{ d.data.businessAddr }}
            </view>
            <view class="re-icon">
              <u-row>
                <u-col span="6" style="padding-left: 0px">
                  <u-icon :label="d.data.managerName || ''" size="30" name="/static/check/manager.png"></u-icon>
                </u-col>
                <u-col span="6">
                  <u-icon
                    :label="d.data.retailTel || ''" size="30" name="phone"
                    @click="modelConfirm(d.data.retailTel)"
                  ></u-icon>
                </u-col>
              </u-row>
            </view>
            <!-- 提示框 modelContent -->
            <u-modal v-model="modelShow" :content="modelContent" @confirm="doPhoneNew(d.data.retailTel)"></u-modal>
          </view>
        </view>
      </me-table>
    </view>
  </view>
</template>

<script>
import MeTable from '@/components/me-table.vue';
import { AMapMixin, } from '@/common/AMapMixin.js';
import MescrollMoreMixin from '@/components/mescroll-uni/mixins/mescroll-more.js';
import certificateService from '@/service/certificate/certificate.service.js';
import checkService from '@/service/check/check.service';
import { L_LIC_STATUS, } from '@/service/query/mapping/enum.js';
import { SET_MAP_LAT_LON, } from '@/config/setting.config.js';
const sysCodeColors = {
  '07': {
    color: '#EC7C37',
    borderColor: '#EC7C37',
    backgroundColor: '#FBE2D3',
  },
  '04': {
    color: '#01A79A',
    borderColor: '#01A79A',
    backgroundColor: '#C0ECE2',
  },
  '01': {
    color: '#AC0000',
    borderColor: '#AC0000',
    backgroundColor: '#F2CCCC',
  },
  '06': {
    color: '#FF9E2C',
    borderColor: '#FF9E2C',
    backgroundColor: '#FFF3E6',
  },
  '08': {
    color: '#0079F2',
    borderColor: '#0079F2',
    backgroundColor: '#E0ECFF',
  },
  '02': {
    color: '#717579',
    borderColor: '#717579',
    backgroundColor: '#EDEEEF',
  },
  '05': {
    color: '#20AB5C',
    borderColor: '#20AB5C',
    backgroundColor: '#DBF4E6',
  },
  '03': {
    color: '#FF9E2C',
    borderColor: '#FF9E2C',
    backgroundColor: '#FFF3E6',
  },
};
export default {
  components: {
    MeTable,
  },
  mixins: [MescrollMoreMixin, AMapMixin,],
  data() {
    return {
      modelShow: false,
      modelContent: '',
      keyword: '',
      longitude: '',
      latitude: '',
      tels: [],
      user: this.$storage.get(this.$rp.common.USER),
      retailData: [],
      firstNoLoad: false,
    };
  },
  onLoad() {
    },
  methods: {
    initAmap() {},
    handlerSearch() {
      if (this.$u.test.isEmpty(this.keyword)) {
        this.$u.toast('请输入关键字');
        return;
      }
      this.$refs['mescrollItem0'].refresh();
    },
    getSpStyle(it) {
      if (it.licStatus == L_LIC_STATUS.SHUT_STATUS) {
        return sysCodeColors[it.licStatus] || {};
      } else if (it.licStatus == L_LIC_STATUS.ORDER_SHUT_STATUS) {
        return sysCodeColors[it.licStatus] || {};
      } else if (it.licStatus == L_LIC_STATUS.CANCEL_STATUS) {
        return sysCodeColors[it.licStatus] || {};
      } else if (it.licStatus == L_LIC_STATUS.CLOSE_STATUS) {
        return sysCodeColors[it.licStatus] || {};
      } else if (it.licStatus == L_LIC_STATUS.WITHDRAW_STATUS) {
        return sysCodeColors[it.licStatus] || {};
      } else if (it.licStatus == L_LIC_STATUS.REVOKE_STATUS) {
        return sysCodeColors[it.licStatus] || {};
      } else if (it.licStatus == L_LIC_STATUS.RECALL_STATUS) {
        return sysCodeColors[it.licStatus] || {};
      } else if (it.licStatus == L_LIC_STATUS.NORMAL_STATUS) {
        return sysCodeColors[it.licStatus] || {};
      }
    },
    // 零售户列表数据查询
    loadData(page) {
      // this.longLatit()
      let self = this;
      let param = {
        keyWord: this.keyword,
      };
      return new Promise((resolve) => {
        this.longLatit().then(() => {
          // if (!this.firstNoLoad) {
          //   this.firstNoLoad = true;
          //   resolve({
          //     count: 0,
          //     data: [],
          //   });
          //   return;
          // }
          param.licStatus = ['01', '02', '10',];
          certificateService
            .getRetailerListByApp(page.num, page.size, param)
            .then((res) => {
              if (res.success) {
                resolve({
                  count: res.count,
                  data: [...res.data,],
                });
              } else {
                resolve({
                  count: 0,
                  data: [],
                });
              }
            })
            .catch((e) => {
              resolve({
                count: 0,
                data: [],
              });
            });
        });
      });
    },
    longLatit() {
      let self = this;
      return new Promise((resolve) => {
        if (this.$deviceApi.geolocation) {
          this.$deviceApi.geolocation().then((res) => {
            self.longitude = res.longitude;
            self.latitude = res.latitude;
            resolve();
          });
        } else {
          self.longitude = SET_MAP_LAT_LON[0];
          self.latitude = SET_MAP_LAT_LON[1];
          resolve();
        }
      });
    },
    // 查看零售户详情
    viewRetailerDetail(retailer) {
        this.$u.route('pages/retailer/retailerInfo/retailerInfo', { retailerUuid: retailer.retailerUuid, });
    },
    // 电话显示
    handlerShowPhone(e, retailerUuid) {
      this.$u.loading('查询中...');
      this.tels = [];
      checkService.retailerTels(retailerUuid).then((dr) => {
        this.$u.hideLoading();
        if (dr.success) {
          let telDatas = dr.data;
          telDatas.forEach((t) => {
            t.tel && this.tels.push(t.name + ' ' + t.tel);
          });
          uni.showActionSheet({
            itemList: this.tels,
            itemColor: '#007aff',
            success: ({ tapIndex, }) => this.doPhone(this.tels[tapIndex]),
          });
        }
      });
    },
    // 拨打电话
    doPhone(telStr) {
      let tel = telStr.substring(telStr.indexOf(' '));
      this.$deviceApi.makePhoneCall(tel);
    },
    // 拨打电话
    doPhoneNew(telStr) {
      if (this.$u.test.isEmpty(telStr)) return;
      // #ifdef H5-DINGDING
      this.$deviceApi.makePhoneCall(telStr);
      // #endif
      // #ifndef H5-DINGDING
      this.$u.toast('H5不支持打电话');
      // #endif
    },
    modelConfirm() {
      this.modelShow = true;
      this.modelContent = '是否打给零售户';
    },
  },
};
</script>

<style lang="scss" scoped>
	@import 'style/certificate/common.scss';
	.page {
		padding: 0;
	}
	.content-list {
		background-color: #f3f4f5;
	}
	.nolicence-search-lay {
		background-color: #fff;
		position: fixed;
		// #ifndef H5-DINGDING
		top: 44px;
		// #endif
		// #ifdef H5-DINGDING
		top: 0px;
		// #endif
		z-index: 999;
		width: 100%;
		overflow: hidden;
		padding: $cm-search-padding-row $cm-search-padding-column;
	}
	.re-list {
		margin: 20rpx;
		color: #666666;
		font-size: 15px;
		border-bottom: 1px solid #e9e9e9;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		-webkit-flex-direction: row;
		background-color: #fff;
		border-radius: 12px;
		padding: 12px;
	}
	.re-media {
		padding-right: 10px;
		vertical-align: middle;
	}
	.re-content {
		width: 100%;
		.re-manager {
			display: flex;
			justify-content: space-between;
			.re-title {
				width: calc(90%);
				font-size: 15px;
				color: #666;
				font-weight: 600;
				margin-bottom: 5px;
				width: 80%;
			}
		}
		.re-subtitle {
			padding-top: 5px;
			color: #666;
		}
		.re-icon {
			display: flex;
			padding-top: 10px;
		}
	}
	/deep/.u-line {
		flex-shrink: 0;
	}
</style>
